﻿<script>
    $(function () {
        $('#ff').datagrid({
            url: 'datagrid_data2.json',
            title: 'DataGrid',
            width: 700,
            fitColumns: true,
            nowrap: false,
            columns: [[
					{ field: 'itemid', title: 'Item ID', width: 80 },
					{ field: 'productid', title: 'Product ID', width: 120 },
					{ field: 'listprice', title: 'List Price', width: 80, align: 'right',
					    styler: function (value, row, index) {
					        if (value < 20) {
					            return 'background-color:#ffee00;color:red;';
					        }
					    }
					},
					{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right' },
					{ field: 'attr1', title: 'Attribute', width: 250 },
					{ field: 'status', title: 'Status', width: 60, align: 'center' }
				]],
            rowStyler: function (index, row, css) {
                if (row.listprice > 80) {
                    return 'background-color:#6293BB;color:#fff;font-weight:bold;';
                }
            }
        });
    });
	</script>
<h2>
    自定义行样式的数据表格 - DataGrid Custom Row Style</h2>
<div class="demo-info" style="margin-bottom: 10px">
    <div class="demo-tip icon-tip">
    </div>
    <div>
        在某些条件下你可以改变行的样式。<br>
    </div>
</div>
<table id="ff">
</table>
